<!doctype html>
<html lang="en">
  <head>
    <title>林科大校医</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

       <!-- 左边菜单栏 -->
       <div class="navigation">

        <ul>
            <li class="list active">
                <b></b>
                <b></b>
                <a href="index.html">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">科室导航</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="departscheduling.html">
                    <span class="icon">
                        <ion-icon name="calendar-outline"></ion-icon>
                    </span>
                    <span class="title">排班</span>
                </a>
            </li>
    
            <li class="list">
                <b></b>
                <b></b>
                <a href="reservationinfo.html">
                    <span class="icon">
                        <ion-icon name="person-circle-outline"></ion-icon>
                    </span>
                    <span class="title">我的预约信息</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="RankingList.html">
                    <span class="icon">
                        <ion-icon name="thumbs-up-outline"></ion-icon>
                    </span>
                    <span class="title">点赞排行榜</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="toggle">
        <ion-icon name="menu-outline" class="open"></ion-icon>
        <ion-icon name="close-outline" class="close"></ion-icon>
    </div>
    
    
    
    
    <div id="app">
        <!-- 导航栏 -->
                 <nav class="navbar navbar-expand-md  navbar-dark" style="background-color: rgb(255, 55, 55);"  id="daohang">
                <a class="navbar-brand" href="#">林科大校医 🏥 </a>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <!-- 在这个导航栏中定义每一个选项 -->
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <!-- 一个选项就是一个li标签 -->
                        <li class="nav-item active ml-3">
                            <a class="nav-link" href="#"><span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item ml-3">
                            <a class="nav-link" href="#"></a>
                        </li>
                    
                    </ul>
                    <p class="userName">用户名:{{userName}}</p>
                </div>
            </nav>
        



    <div class="row">
    <!--预约信息查看--查看挂号信息  -->
    <div class="col-5 mb-3 ml-5 mr-3" style="border: 1px solid rgb(218, 215, 215); border-radius: 10px;":key="index" id="zx">
        <table   class="table">
            <tbody>
                <tr>
                    <td>就诊人: {{user.name}}</td>
                </tr>
                <tr>
                    <td>就诊科室: {{depart.title}}</td>
                </tr>
                <tr>
                    <td>预约号: {{appointment.num}}</td>
                </tr>
                <tr>
                    <td>就诊时间: {{appointment.time}}</td>
                </tr>
                
                <tr>
                    <td>医生姓名: {{appointment.doctor.name}}</td>
                </tr>
               
                <tr>
                    <td>诊费:  {{appointment.clinic.title}}---{{appointment.clinic.fees}}</td>
                </tr>
                <tr>
                    <td>
                        <button type="button" class="btn btn-danger btn-lg btn-block">取消预约</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
    
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  </body>
</html>
<script>
     var url = `http://localhost:8081`;
    new Vue({
        el:"#app",
        data() {
            return {
                appointment:[],
                depart:null,
                user:[],
                userName:"",
            }
        },
        mounted() {
            this.depart = JSON.parse(sessionStorage.getItem("curDepart"));
            this.appointment = JSON.parse(sessionStorage.getItem("appoint"));
            this.user = JSON.parse(sessionStorage.getItem("user"));
            this.userName=JSON.parse(sessionStorage.getItem("user")).name;
        
        },
            
        methods: {
           
        },
    })
</script>
<script>
    //添加动作
    let menuToggle = document.querySelector('.toggle');
    let navigation = document.querySelector('.navigation')
    menuToggle.onclick = function () {
        menuToggle.classList.toggle('active');
        navigation.classList.toggle('active');
    }
    //点击
    let list = document.querySelectorAll('.list');
    for (let i = 0; i < list.length; i++) {
        list[i].onclick = function () {
            let j = 0;
            while (j < list.length) {
                list[j++].className = 'list'
            }
            list[i].className = 'list active';
        }
    }
</script>
<style>

    .row{
        padding-top: 200px;
        padding-left: 450px;
        
    }
</style>